<template>
  <div class="font">
    <el-col :span="24">
      <Tabs value="name1">
        <TabPane label="基本信息" name="name1">
          <!--一行-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>基本信息</h3>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>姓名</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="谢茂">
                    </el-col>
                  </el-col>
                  <el-col :span="11" style="margin-left: 8%;">
                    <el-col :span="6">
                      <span>性别</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="男">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>所在医院</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="中山大学第一医院">
                    </el-col>
                  </el-col>
                  <el-col :span="11" style="margin-left: 8%;">
                    <el-col :span="6">
                      <span>科室</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="内分泌科">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>称职</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="主任医师">
                    </el-col>
                  </el-col>
                  <el-col :span="11" style="margin-left: 8%;">
                    <el-col :span="6">
                      <span>职务</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="副院长">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>个人简介</span>
                    </el-col>
                    <el-col :span="15">
                      <textarea class="search-input"style="height:80px;overflow:hidden; resize:none;">谢茂，男，现任中山大学第一医院内分泌科主任医师、糖尿病研究室主任、主任医师、内科学教授、博士研究生导师。从事临床工作28年。</textarea>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--二行-->
          <!--          <el-row class="row">
                      <el-col :span="11">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>影响力得分</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <Pier></Pier>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                      <el-col :span="11" style="margin-left: 8%;">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>影响力分布</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                                <Distribute></Distribute>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                    </el-row>-->
        </TabPane>
        <TabPane label="通用图谱" name="name2">
          <!--三行-->
          <!--          <el-row class="row">

                      <el-col :span="11">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>合作度医院</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <div :style="{width: '100%', height: '400px'}">
                                  <Hollowpier></Hollowpier>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                      <el-col :span="11" style="margin-left: 8%;">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>研究方向</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <div :style="{width: '100%', height: '400px'}">
                                  <NestedLoop></NestedLoop>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                    </el-row>-->
          <!--四行-->
          <!--          <el-row class="row">
                      <div class="center">
                        <el-row :gutter="20">
                          <el-col :span="24" class="h">
                            <h3>论文期刊分布</h3>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="24" style="padding-top: 50px">
                            <el-card shadow="hover" :body-style="{ height: '100%'}">
                              <div :style="{width: '100%', height: '400px'}">
                                <Pillar></Pillar>
                              </div>
                            </el-card>
                          </el-col>
                        </el-row>
                      </div>
                    </el-row>-->
          <!--十一行-->
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>通用图谱得分</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div>
                      <p class="slider-title">影响力</p>
                      <ion-slider :grid="false" :from="82"/>
                      <p class="slider-title">学术水平</p>
                      <ion-slider from="86"/>
                      <p class="slider-title">医生潜力</p>
                      <ion-slider postfix="" from="0"/>
                      <p class="slider-title">合作意愿</p>
                      <ion-slider from="53"/>
                      <p class="slider-title">渠道偏好</p>
                      <ion-slider from="30"/>
                      <p class="slider-title">内容偏好</p>
                      <ion-slider style="margin-bottom: 20px;" from="12"/>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--十二-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="18">
                      <p>通用图谱得分</p>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <el-dropdown class="user-name" trigger="click">
                          <span style="color: #fff" >全部医生<Icon type="md-arrow-dropdown"/></span>
                          <!--                          <span class="el-icon-setting" style="color: #fff;font-size: 22px"></span>-->
                          <el-dropdown-menu slot="dropdown">
                            <Checkbox label="同医院" style="padding-left: 10px">同医院</Checkbox> <br>
                            <Checkbox label="同级别" style="padding-left: 10px">同级别</Checkbox> <br>
                            <Checkbox label="同区域" style="padding-left: 10px">同区域</Checkbox> <br>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts15/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col style="margin-left: 8%;" :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>影响力分布</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts1/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--十三-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>研究方向</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts2/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" style="margin-left: 8%;">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>期刊论文发布</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts4/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--十四-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>论文关键词走势</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts5/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" style="margin-left: 8%;">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>论文发表走势</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts3/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--十五-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <h3>论文期刊分布</h3>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="margin-top: -1px;padding-bottom: 40px;">
                  <el-collapse>
                    <el-collapse-item title="重点中文文章" name="1">
                      <table cellspacing=0 class="z-table">
                        <thead>
                        <tr>
                          <th>
                            序号
                          </th>
                          <th>
                            文章名
                          </th>
                          <th>
                            年份
                          </th>
                          <th>
                            关键词
                          </th>
                          <th>
                            杂志名
                          </th>
                          <th>
                            作者
                          </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="z-primary">
                          <td>1</td>
                          <td>发热伴肺部阴影诊断的问题与共识</td>
                          <td>2018</td>
                          <td>抗原,CD4, 淋巴瘤,T细胞, 嵌合抗原受体修饰的T细胞</td>
                          <td>第十三届中国呼吸医师论坛暨第九届中国呼吸医师奖颁奖大会论文集</td>
                          <td>陈广华, 黄海雯,</td>
                        </tr>
                        <tr class="z-success">
                          <td>2</td>
                          <td>鼻咽癌肺转移伴肺组织胞浆菌病一例</td>
                          <td>2018</td>
                          <td>酪氨酸激酶抑制剂, 造血干细胞移植,异基因, 费城染色体, 白血病</td>
                          <td>实用医学杂志</td>
                          <td>杨飞, 蔡文治, 杨小冬</td>
                        </tr>
                        <tr class="z-warning">
                          <td>3</td>
                          <td>发热伴肺部阴影诊断的问题与共识</td>
                          <td>2017</td>
                          <td>感染, 多发性骨髓瘤, 硼替佐米, 化学治疗, 医院感染</td>
                          <td>中国感染控制杂志
                          </td>
                          <td>颜霜, 傅琤琤, 周进</td>
                        </tr>
                        <tr class="z-danger">
                          <td>4</td>
                          <td>体外膜肺氧合在危重症患者的应用</td>
                          <td>2017</td>
                          <td>感染, 多发性骨髓瘤, 硼替佐米,</td>
                          <td>国际呼吸杂志</td>
                          <td>颜霜, 傅琤琤, 周进, 徐云, 姚颖</td>
                        </tr>
                        <tr class="z-info">
                          <td>5</td>
                          <td>第兔胸腔内注射滑石粉致肺及肺外全身系统性播散</td>
                          <td>2017</td>
                          <td>脓毒症, 降钙素原, 巨噬细胞迁移抑制因子, 生物标志物</td>
                          <td>广东医学</td>
                          <td>陆茵, 朱霞明, 李芹</td>
                        </tr>
                        </tbody>
                      </table>
                    </el-collapse-item>
                    <el-collapse-item title="重点英文文章" name="2">
                      <table cellspacing=0 class="z-table">
                        <tbody>
                        <tr>
                          <th class="col-md-1"><h4>序号</h4></th>
                          <th><h4>文章名</h4></th>
                          <th><h4>年份</h4></th>
                          <th><h4>关键词</h4></th>
                          <th><h4>杂志名</h4></th>
                          <th><h4>作者</h4></th>
                        </tr>
                        <tr class="z-primary">
                          <td>1</td>
                          <td>Importance of fractional exhaled nitric oxide in diagnosis of bronchiectasis accompanied with bronchial asthma.</td>
                          <td>2018</td>
                          <td>adult acute lymphoblastic leukemia</td>
                          <td>Fractional exhaled nitric oxide (FeNO);asthma;asthma management;bronchiectasis (BE)</td>
                          <td>WuJie;XiaoLun;ZhouHaixia</td>
                        </tr>
                        <tr class="z-success">
                          <td>2</td>
                          <td>Tracking hematopoietic precursor division ex vivo in real time.</td>
                          <td>2018</td>
                          <td>Hematopoietic stem cell-cell division</td>
                          <td>Stem cell research &amp; therapy</td>
                          <td>WangYuchen;TianHong;CaiWenzhi;LianZhaorui;BhavanasiDheeraj</td>
                        </tr>
                        <tr class="z-warning">
                          <td>3</td>
                          <td>Identification of novel recurrent</td>
                          <td>2017</td>
                          <td>Tim-3;acute leukemia</td>
                          <td>Journal of experimental & clinical cancer research : CR</td>
                          <td>YaoLi;WenLijun;WangNana;LiuTianhui</td>
                        </tr>
                        <tr class="z-danger">
                          <td>4</td>
                          <td>Clinical significance of circulating microparticles in Ph</td>
                          <td>2017</td>
                          <td>JAK2V617F mutation;microparticles</td>
                          <td>Journal of experimental & clinical cancer research : CR</td>
                          <td>ZhangWenjuan;QiJiaqian</td>
                        </tr>
                        <tr class="z-info">
                          <td>5</td>
                          <td>Multiple</td>
                          <td>2017</td>
                          <td>Imatinib;MPNs;MYO18A</td>
                          <td>Molecular cytogenetics</td>
                          <td>ShengGuangying;ZengZhao;PanJinlan</td>
                        </tr>
                        </tbody>
                      </table>
                    </el-collapse-item>
                    <el-collapse-item title="专利成果" name="3">
                      <table cellspacing=0 class="z-table">
                        <tbody>
                        <tr>
                          <th class="col-md-1"><h4>序号</h4></th>
                          <th><h4>姓名</h4></th>
                          <th><h4>工作单位</h4></th>
                          <th><h4>专利名</h4></th>
                          <th><h4>专利年份</h4></th>
                          <th><h4>专利号</h4></th>
                        </tr>
                        <tr class="z-primary">
                          <td>1</td>
                          <td>谢茂</td>
                          <td>中山大学附属第一医院</td>
                          <td>呼吸功能康复排痰器</td>
                          <td>2000</td>
                          <td>992387256</td>
                        </tr>
                        <tr class="z-success">
                          <td>2</td>
                          <td>谢茂</td>
                          <td>中山大学附属第一医院</td>
                          <td>排痰康复器</td>
                          <td>1999</td>
                          <td>001172018</td>
                        </tr>
                        </tbody>
                      </table>
                    </el-collapse-item>
                    <el-collapse-item title="科研项目" name="4">
                      <table cellspacing=0 class="z-table">
                        <tbody>
                        <tr>
                          <th class="col-md-1"><h4>序号</h4></th>
                          <th><h4>注册题目</h4></th>
                          <th><h4>研究类型</h4></th>
                          <th><h4>研究设计</h4></th>
                          <th><h4>注册时间</h4></th>
                          <th><h4>经费来源</h4></th>
                        </tr>
                        <tr class="z-primary">
                          <td>1</td>
                          <td>轻度哮喘－信必可?按需疗法临床试验研究方案</td>
                          <td>干预性研究</td>
                          <td>随机平行对照试验</td>
                          <td>2009/10/18</td>
                          <td>自筹</td>
                        </tr>

                        </tbody>
                      </table>
                    </el-collapse-item>
                  </el-collapse>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--十六-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>指南编著情况</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts6/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" style="margin-left: 8%;">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>共著关系网</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts7/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--十七-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>医生潜力</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts8/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" style="margin-left: 8%;">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>学术推广潜力-参会活跃度</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts9/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--十八-->
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>药企合作占比</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts10/>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--十九-->
          <el-row>
            <el-col :span="24">
              <el-row class="row">
                <div class="center">
                  <table class="z-table">
                    <thead>
                    <tr>
                      <th class="browser-icons"></th>
                      <th class="align-left">会议名称</th>
                      <th class="align-left">日期</th>
                      <th class="align-left">会议角色</th>
                      <th class="align-left">题目</th>
                      <th class="align-left">发言类型</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td><img src="./../../../assets/img/hr.jpg" width="20" height="20"></td>
                      <td class="align-left">广东省医学会第十次内科学学术会议暨第九次逸仙呼吸论坛</td>
                      <td class="align-left">20161116</td>
                      <td class="align-left">发言</td>
                      <td class="align-left">MRAS感染万古霉素规范化治疗共识专家讨论会 </td>
                      <td class="align-left">大会发言</td>
                    </tr>

                    <tr>
                      <td><img src="../../../assets/img/hr.jpg" width="20" height="20"></td>
                      <td class="align-left">中国医师协会呼吸医师分会年会2017暨第十六届中国呼吸医师论坛</td>
                      <td class="align-left">20170415</td>
                      <td class="align-left">发言</td>
                      <td class="align-left">社区获得性肺炎的初始诊治思维/td>
                      <td class="align-left">专题发言</td>
                    </tr>

                    <tr>
                      <td><img src="../../../assets/img/hr.jpg" width="20" height="20"></td>
                      <td class="align-left">中华医学会糖尿病学分会第十九次全国学术会议</td>
                      <td class="align-left">20171209</td>
                      <td class="align-left">参会</td>
                      <td class="align-left">讨论会</td>
                      <td class="align-left">专家答疑</td>
                    </tr>
                    <tr>
                      <td><img src="../../../assets/img/az.jpg" width="20" height="20"></td>
                      <td class="align-left">2015第十一届国际呼吸病论坛 </td>
                      <td class="align-left">20150617</td>
                      <td class="align-left">参会</td>
                      <td class="align-left">讨论会</td>
                      <td class="align-left">专家答疑</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </el-row>

            </el-col>
          </el-row>
          <!--二十-->
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>渠道偏好</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts11/>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--二十一-->
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>HUI平台活跃度</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts12/>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--二十二-->
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>关注内容</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts13/>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane label="疾病图谱" name="name3">
          <!--          &lt;!&ndash;五行&ndash;&gt;
                    <el-row class="row">
                      <el-col :span="11">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>论文关键词走势</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <div :style="{width: '100%', height: '400px'}">
                                  <Splashes></Splashes>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                      <el-col :span="11" style="margin-left: 8%;">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>论文发表走势</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <div :style="{width: '100%', height: '400px'}">
                                  <Area/>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                    </el-row>
                    &lt;!&ndash;六行&ndash;&gt;
                    <el-row class="row">
                      <div class="center">
                        <el-row :gutter="20">
                          <el-col :span="24" class="h">
                            <el-col :span="22">
                              <h3>学术成果</h3>
                            </el-col>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="24" style="padding: 50px 0">

                            <el-collapse accordion>
                              <el-collapse-item>
                                <template slot="title">重点中文文章</template>
                                <div>重点中文文章</div>
                              </el-collapse-item>

                              <el-collapse-item>
                                <template slot="title">重点英文文章</template>
                                <div>重点英文文章</div>
                              </el-collapse-item>

                              <el-collapse-item>
                                <template slot="title">专利成果</template>
                                <div>专利成果</div>
                              </el-collapse-item>

                              <el-collapse-item>
                                <template slot="title">科研项目</template>
                                <div>科研项目</div>
                              </el-collapse-item>

                            </el-collapse>

                          </el-col>
                        </el-row>
                      </div>
                    </el-row>-->
          <!--五行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>个人Perception得分</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <personage></personage>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" style="margin-left: 8%;">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="18">
                      <p>Perception得分在群体中的位置</p>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <el-dropdown class="user-name" trigger="click">
                          <span style="color: #fff" >全部医生<Icon type="md-arrow-dropdown"/></span>
<!--                          <span class="el-icon-setting" style="color: #fff;font-size: 22px"></span>-->
                          <el-dropdown-menu slot="dropdown">
                            <Checkbox label="同医院" style="padding-left: 10px">同医院</Checkbox> <br>
                            <Checkbox label="同级别" style="padding-left: 10px">同级别</Checkbox> <br>
                            <Checkbox label="同区域" style="padding-left: 10px">同区域</Checkbox> <br>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Perception></Perception>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--六行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="18">
                      <p>治疗方案偏好</p>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <el-dropdown class="user-name" trigger="click">
                          <span style="color: #fff" >疾病类型<Icon type="md-arrow-dropdown"/></span>
                          <el-dropdown-menu slot="dropdown">
                            <Checkbox label="小细胞肺癌" style="padding-left: 10px">小细胞肺癌</Checkbox> <br>
                            <Checkbox label="大细胞肺癌" style="padding-left: 10px">大细胞肺癌</Checkbox> <br>
                            <Checkbox label="肺鳞癌" style="padding-left: 10px">肺鳞癌</Checkbox> <br>
                            <Checkbox label="肺腺癌" style="padding-left: 10px">肺腺癌</Checkbox> <br>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <treat1></treat1>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" style="margin-left: 8%;">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="18">
                      <p>用药偏好</p>
                    </el-col>
                    <el-col :span="6">
                      <div>
                        <el-dropdown class="user-name" trigger="click">
                          <span style="color: #fff" >用药偏好<Icon type="md-arrow-dropdown"/></span>
                          <el-dropdown-menu slot="dropdown">
                            <Checkbox label="一线用药" style="padding-left: 10px">一线用药</Checkbox> <br>
                            <Checkbox label="二线用药" style="padding-left: 10px">二线用药</Checkbox> <br>
                            <Checkbox label="三线用药" style="padding-left: 10px">三线用药</Checkbox> <br>
                            <Checkbox label="四线用药" style="padding-left: 10px">四线用药</Checkbox> <br>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <ClassLabel></ClassLabel>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
        </TabPane>
        <TabPane label="历史记录" name="name4">
          <!--七行-->
          <el-row class="row">
            <el-col :span="24">
              <div class="center">
                <calendar></calendar>
<!--                <div id="schedule" style="color: white;width: 100%">
                  <div class="el-picker-panel__body-wrapper">
                    <div class="el-picker-panel__body">
                      <div class="el-date-picker__header">
                        <button type="button" aria-label="前一年"
                                class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
                        <button type="button" aria-label="上个月"
                                class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left"></button>
                        <span role="button" class="el-date-picker__header-label">2018 年</span><span role="button"
                                                                                                    class="el-date-picker__header-label">9 月</span>
                        <button type="button" aria-label="后一年"
                                class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
                        <button type="button" aria-label="下个月"
                                class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right"></button>
                      </div>
                      <div class="el-picker-panel__content">
                        <table cellspacing="0" cellpadding="0" class="el-date-table" width="100%">
                          <tbody>
                          <tr>
                            <th>日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                          </tr>
                          <tr class="el-date-table__row">
                            <td class="prev-month">
                              <div><span>
        26
      </span></div>
                            </td>
                            <td class="prev-month">
                              <div><span>
        27
      </span></div>
                            </td>
                            <td class="prev-month">
                              <div><span>
        28
      </span></div>
                            </td>
                            <td class="prev-month">
                              <div><span>
        29
      </span></div>
                            </td>
                            <td class="prev-month">
                              <div><span>
        30
      </span></div>
                            </td>
                            <td class="prev-month">
                              <div><span>
        31
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        1
      </span></div>
                            </td>
                          </tr>
                          <tr class="el-date-table__row">
                            <td class="available">
                              <div><span>
        2
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        3
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        4
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        5
      </span></div>
                            </td>
                            <td class="available today">
                              <div><span>
        6
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        7
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        8
      </span></div>
                            </td>
                          </tr>
                          <tr class="el-date-table__row">
                            <td class="available">
                              <div><span>
        9
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        10
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        11
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        12
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        13
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        14
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        15
      </span></div>
                            </td>
                          </tr>
                          <tr class="el-date-table__row">
                            <td class="available">
                              <div><span>
        16
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        17
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        18
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        19
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        20
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        21
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        22
      </span></div>
                            </td>
                          </tr>
                          <tr class="el-date-table__row">
                            <td class="available">
                              <div><span>
        23
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        24
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        25
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        26
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        27
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        28
      </span></div>
                            </td>
                            <td class="available">
                              <div><span>
        29
      </span></div>
                            </td>
                          </tr>
                          <tr class="el-date-table__row">
                            <td class="available">
                              <div><span>
        30
      </span></div>
                            </td>
                            <td class="next-month">
                              <div><span>
        1
      </span></div>
                            </td>
                            <td class="next-month">
                              <div><span>
        2
      </span></div>
                            </td>
                            <td class="next-month">
                              <div><span>
        3
      </span></div>
                            </td>
                            <td class="next-month">
                              <div><span>
        4
      </span></div>
                            </td>
                            <td class="next-month">
                              <div><span>
        5
      </span></div>
                            </td>
                            <td class="next-month">
                              <div><span>
        6
      </span></div>
                            </td>
                          </tr>
                          </tbody>
                        </table>
                        <table class="el-year-table" style="display: none;">
                          <tbody>
                          <tr>
                            <td class="available"><a class="cell">2010</a></td>
                            <td class="available"><a class="cell">2011</a></td>
                            <td class="available"><a class="cell">2012</a></td>
                            <td class="available"><a class="cell">2013</a></td>
                          </tr>
                          <tr>
                            <td class="available"><a class="cell">2014</a></td>
                            <td class="available"><a class="cell">2015</a></td>
                            <td class="available"><a class="cell">2016</a></td>
                            <td class="available"><a class="cell">2017</a></td>
                          </tr>
                          <tr>
                            <td class="available today"><a class="cell">2018</a></td>
                            <td class="available"><a class="cell">2019</a></td>
                            <td></td>
                            <td></td>
                          </tr>
                          </tbody>
                        </table>
                        <table class="el-month-table" style="display: none;">
                          <tbody>
                          <tr>
                            <td><a class="cell">一月</a></td>
                            <td><a class="cell">二月</a></td>
                            <td><a class="cell">三月</a></td>
                            <td><a class="cell">四月</a></td>
                          </tr>
                          <tr>
                            <td><a class="cell">五月</a></td>
                            <td><a class="cell">六月</a></td>
                            <td><a class="cell">七月</a></td>
                            <td><a class="cell">八月</a></td>
                          </tr>
                          <tr>
                            <td class="today"><a class="cell">九月</a></td>
                            <td><a class="cell">十月</a></td>
                            <td><a class="cell">十一月</a></td>
                            <td><a class="cell">十二月</a></td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>-->
              </div>
            </el-col>
          </el-row>

          <!--八行-->
          <!--          <el-row class="row">
                      <div class="center">
                        <el-row :gutter="20">
                          <el-col :span="24" class="h">
                            <h3>线上问诊</h3>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="24" style="padding-top: 50px">
                            <el-card shadow="hover" :body-style="{ height: '100%'}">
                              <div :style="{width: '100%', height: '400px'}">
                                <LineColumn></LineColumn>
                              </div>
                            </el-card>
                          </el-col>
                        </el-row>
                      </div>
                    </el-row>-->
          <!--          &lt;!&ndash;九 行&ndash;&gt;
                    <el-row class="row">
                      <el-col :span="11">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>HUI平台活跃度</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <Linear></Linear>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                      <el-col :span="11" style="margin-left: 8%;">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>关注内容</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                                <Sanchi></Sanchi>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                    </el-row>
                    &lt;!&ndash;十行&ndash;&gt;
                    <el-row class="row">
                      <el-col :span="11">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>医生潜力</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{ height: '100%'}">
                                <Circless></Circless>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                      <el-col :span="11" style="margin-left: 8%;">
                        <div class="center">
                          <el-row>
                            <el-col :span="24" class="h">
                              <p>学术推广潜力-参会活跃度</p>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="24">
                              <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                                <Splashes2></Splashes2>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>

                    </el-row>-->
        </TabPane>
      </Tabs>

    </el-col>
  </div>
</template>

<script>
  import Pier from './pier';
  import Distribute from './distribute';
  import Hollowpier from './hollowpier';
  import NestedLoop from './NestedLoop';
  import Pillar from './pillar';
  import Splashes from './splashes';
  import Area from './area';
  import Relation from './relation';
  import LineColumn from './LineColumn';
  import Linear from './linear';
  import Sanchi from './sanchi';
  import Splashes2 from './splashes2';
  import Circless from './circless';
  import calendar from './calendar';

  import chartwrap from '@/comcom/chartwrap'
  import charts1 from './charts/charts1'
  import charts2 from './charts/charts2'
  import charts3 from './charts/charts3'
  import charts4 from './charts/charts4'
  import charts5 from './charts/charts5'
  import charts6 from './charts/charts6'
  import charts7 from './charts/charts7'
  import charts8 from './charts/charts8'
  import charts9 from './charts/charts9'
  import charts10 from './charts/charts10'
  import charts11 from './charts/charts11'
  import charts12 from './charts/charts12'
  import charts13 from './charts/charts13'
  import charts14 from './charts/charts14'
  import charts15 from './charts/charts15'
  import ionSlider from '@/comcom/ionSlider'

  import personage from './personage';
  import Perception from './Perception';
  import treat1 from './treat1';
  import ClassLabel from './ClassLabel';

  require('ion-rangeslider');

  export default {
    components: {
      chartwrap,
      charts1,
      charts2,
      charts3,
      charts4,
      charts5,
      charts6,
      charts7,
      charts8,
      charts9,
      charts10,
      charts11,
      charts12,
      charts13,
      charts14,
      charts15,
      ionSlider,
      personage,
      Perception,
      treat1,
      ClassLabel,
      calendar,

      Pier,
      Distribute,
      Hollowpier,
      NestedLoop,
      Pillar,
      Splashes,
      Area,
      Relation,
      LineColumn,
      Linear,
      Sanchi,
      Splashes2,
      Circless
    },
    mounted() {
      this.a()
    },
    methods: {
      a(){
        $('#app').attr("title","")
      }
    }
  }
</script>

<style scoped>
  .basic {
    background-color: rgba(245, 245, 248, 0.1);
    margin-top: 50px;
  }

  .basic > div {
    color: #fff;
    padding: 15px 20px;
  }

  .row {
    padding-bottom: 30px;
  }

  .center {
    padding: 10px 40px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }

  .h {
    border-bottom: 2px solid #fff;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }

  span {
    display: inline-block;
    height: 25px;
    font-size: 16px;
  }

  .el-button {
    background: #1f9f91;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 9px 14px;
  }

  .search-input {
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 30px;
    width: 100%;
  }

  .el-card {
    background-color: rgba(245, 245, 248, 0);
    border: none;
  }

  .z-primary {
    background-color: rgba(32, 158, 145, 0.7);
  }

  .z-success {
    background-color: rgba(144, 185, 0, 0.7);
  }

  .z-warning {
    background-color: rgba(223, 184, 28, 0.7);
  }

  .z-danger {
    background-color: rgba(232, 86, 86, 0.7);
  }

  .z-info {
    background-color: rgba(45, 172, 209, 0.7);
  }

  .align-left {
    color: #fff;
  }

  .z-table {
    border-radius: 6px;
    border: 0;
    width: 100%;
    padding: 10px;
  }

  .z-table th {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
  }

  .z-table tbody td {
    font-size: 14px;
    padding: 6px 0;
  }

  .z-table tbody tr td:first-child {
    text-align: center;
  }

  .irs-grid-text {
    color: #fff;
  }

  .date-wrap {
    padding-right: 30px;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto;
  }

  tr td th {
    border: 1px solid #fff !important;
  }

  #schedule > td {
    border: 1px solid #fff !important;
  }
</style>
<style>
  .ivu-tabs-nav {
    width: 100%;
  }

  .ivu-tabs-nav > div {
    width: 25%;
    text-align: center;
  }

  .ivu-tabs-tab {
    color: #fff;
    font-size: 20px;
  }

  .ivu-tabs-ink-bar {
    background-color: #e85656 !important;
    height: 5px !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -5px !important;
  }

  .ivu-tabs-nav .ivu-tabs-tab-active {
    color: #fff !important;
    font-weight: bold !important;
  }

  .ivu-tabs-nav {
    border-bottom: 5px solid #fff !important;
  }

  .el-collapse-item__header {
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff !important;
  }

  .el-collapse-item__wrap {
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff !important;
  }

  .el-collapse-item__content {
    color: #fff !important;
  }
</style>

